<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: url(./img/3BC70022AA06B9C176697A39EC5CE399.png) no-repeat top center fixed;
            background-size: 100% auto;
        }
        .content{
            width: 900px;
            height: 1000px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        img{
            z-index: 1;
            width: 20%;
            height: auto;
            position: absolute;
            padding: 10px 10px 15px 10px;
            background: #ffffff;
            border: 1px solid #CCCCCC;
            /* 动画的时间 */
            -moz-transition: 0.5s;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }
        img:hover{
            z-index: 2;
            transform: scale(1.5);
            -moz-transform: scale(1.5) ;
            -webkit-transform: scale(1.5) ;
            box-shadow: -10px 10px 20px #000000;
            -moz-box-shadow: -10px 10px 20px #000000;
            -webkit-box-shadow: -10px 10px 20px #000000;
        }
        .pic1{
            left: 100px;
            top: 50px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);
        }
        .pic2{
            left: 280px;
            top: 60px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }
        .pic3{
            left: 150px;
            top: 80px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);}

        .pic4{
            left: 250px;
            top: 90px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);}
        .pic5{
            left: 300px;
            top: 190px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);}
        .pic6{
            left: 270px;
            top: 150px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);}
        .pic7{
            left: 120px;
            top: 150px;
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            transform: rotate(20deg);}
    </style>
</head>
<body>
<div class="content">
    <img class="pic1" src="img/3BC70022AA06B9C176697A39EC5CE399.png" />
    <img class="pic2" src="img/4A53845723322D5BE1CF66E92921C36E.png" />
    <img class="pic3" src="img/5D95562C1E4665389253D20E61A20D84.png" />
    <img class="pic4" src="img/24D38740CE45B2F411B0FEC2344E32D9.png" />
    <img class="pic5" src="img/D9F29C31F231C67F2AF07A76898D7C95.png" />
    <img class="pic6" src="img/D79D44AEAE27F79DD66C59893BEEEC65.png" />
    <img class="pic7" src="img/D79D44AEAE27F79DD66C59893BEEEC65.png" />
    <img class="pic8" src="img/D79D44AEAE27F79DD66C59893BEEEC65.png" />
    <img class="pic9" src="img/5D95562C1E4665389253D20E61A20D84.png" />
    <img class="pic10" src="img/5D95562C1E4665389253D20E61A20D84.png" />
</div>
</body>
</html>